
<template>
  <div>
    <h3>学生基本信息名单</h3>
    <!--卡片视图-->
    <el-card>
      <!--搜索与添加区域-->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input
            placeholder="请输入考号"
            v-model="quaryInfo.searchText"
            clearable
            @clear="getExamineeList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getExamineeList"
              >搜索</el-button
            >
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisable = true">
            添加学生
          </el-button>
        </el-col>
      </el-row>

      <!--用户列表区-->
      <el-table :data="examineelist" border stripe>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="考号" prop="ENo"></el-table-column>
        <el-table-column label="姓名" prop="EName"></el-table-column>
        <el-table-column label="性别" prop="ESex"></el-table-column>
        <el-table-column label="年龄" prop="EAge"></el-table-column>
        <el-table-column label="政治面貌" prop="EPolitical"></el-table-column>
        <el-table-column label="是否应届" prop="IsCurrent"></el-table-column>
        <el-table-column label="学历" prop="EQualifications"></el-table-column>
        <el-table-column label="来源" prop="ESource"></el-table-column>
        <el-table-column label="报考专业名称" prop="ERfeMajor"></el-table-column>
        <el-table-column label="报考学科门类" prop="ERfeCategory"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.ENo)"
            ></el-button>
            <!--删除按钮-->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removExamineeById(scope.row.ENo)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页区-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="quaryInfo.page"
        :page-sizes="[8, 10, 20]"
        :page-size="quaryInfo.limit"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!--添加学生对话框-->
    <el-dialog
      title="添加学生"
      :visible.sync="addDialogVisable"
      width="50%"
      @close="addDiaogClose"
    >
      <!--内容主体区域-->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <el-form-item label="考号" prop="ENo">
          <el-input v-model="addForm.ENo"></el-input>
        </el-form-item>

        <el-form-item label="姓名" prop="EName">
          <el-input v-model="addForm.EName"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="ESex">
          <el-input v-model="addForm.ESex"></el-input>
        </el-form-item>

        <el-form-item label="年龄" prop="EAge">
          <el-input v-model="addForm.EAge"></el-input>
        </el-form-item>

        <el-form-item label="政治面貌" prop="EPolitical">
          <el-input v-model="addForm.EPolitical"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="IsCurrent">
          <el-input v-model="addForm.IsCurrent"></el-input>
        </el-form-item>

        <el-form-item label="学历" prop="EQualifications">
          <el-input v-model="addForm.EQualifications"></el-input>
        </el-form-item>

        <el-form-item label="来源" prop="ESource">
          <el-input v-model="addForm.ESource"></el-input>
        </el-form-item>

        <el-form-item label="报考专业名" prop="ERfeMajor">
          <el-input v-model="addForm.ERfeMajor"></el-input>
        </el-form-item>

        <el-form-item label="报考类别" prop="ERfeCategory">
          <el-input v-model="addForm.ERfeCategory"></el-input>
        </el-form-item>
      </el-form>
      <!--底部-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisable = false">取 消</el-button>
        <el-button type="primary" @click="addExaminee">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改学生-->
    <el-dialog
      title="修改学生"
      :visible.sync="editdialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <el-form :model="editForm" ref="editFormRef" label-width="70px">
        <el-form-item label="考号" prop="ENo">
          <el-input v-model="editForm.ENo" disabled></el-input>
        </el-form-item>

        <el-form-item label="姓名" prop="EName">
          <el-input v-model="editForm.EName"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="ESex">
          <el-input v-model="editForm.ESex"></el-input>
        </el-form-item>

        <el-form-item label="年龄" prop="EAge">
          <el-input v-model="editForm.EAge"></el-input>
        </el-form-item>

        <el-form-item label="政治面貌" prop="EPolitical">
          <el-input v-model="editForm.EPolitical"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="IsCurrent">
          <el-input v-model="editForm.IsCurrent"></el-input>
        </el-form-item>

        <el-form-item label="学历" prop="EQualifications">
          <el-input v-model="editForm.EQualifications"></el-input>
        </el-form-item>

        <el-form-item label="来源" prop="ESource">
          <el-input v-model="editForm.ESource"></el-input>
        </el-form-item>

        <el-form-item label="目标专业" prop="ERfeMajor">
          <el-input v-model="editForm.ERfeMajor"></el-input>
        </el-form-item>

        <el-form-item label="专业类别" prop="ERfeCategory">
          <el-input v-model="editForm.ERfeCategory"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editExamineeInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      //获取用户列表的参数对象
      quaryInfo: {
        searchText: '',
        page: 1,
        //当前每页显示多少条数据
        limit: 8,
      },
      examineelist: [],
      total: 0,
      //控制显示与隐藏
      addDialogVisable: false,
      //添加用户的表单数据
      addForm: {
        ENo: '',
        EName: '',
        ESex: '',
        EAge: '',
        EPolitical: '',
        IsCurrent: '',
        EQualifications: '',
        ESource: '',
        ERfeMajor: '',
        ERfeCategory: '',
      },
      addFormRules: {
        ENo: [
          {
            required: true,
            message: '考号不能为空',
            trigger: 'blur',
          },
        ],
        EName: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
          },
        ],
        ESex: [
          {
            required: true,
            message: '性别不能为空',
            trigger: 'blur',
          },
        ],
        EAge: [
          {
            required: true,
            message: '年龄不能为空',
            trigger: 'blur',
          },
        ],
        EPolitical: [
          {
            required: true,
            message: '政治面貌不能为空',
            trigger: 'blur',
          },
        ],
        IsCurrent: [
          {
            required: true,
            message: '是否应届不能为空',
            trigger: 'blur',
          },
        ],
        EQualifications: [
          {
            required: true,
            message: '学历不能为空',
            trigger: 'blur',
          },
        ],
        ESource: [
          {
            required: true,
            message: '来源不能为空',
            trigger: 'blur',
          },
        ],
        ERfeMajor: [
          {
            required: true,
            message: '报考专业不能为空',
            trigger: 'blur',
          },
        ],
        ERfeCategory: [
          {
            required: true,
            message: '类别不能为空',
            trigger: 'blur',
          },
        ],
      },
      //控制修改对话框的隐藏
      editdialogVisible: false,
      //查询到的用户信息对象
      editForm: {},
    }
  },

  created() {
    this.getExamineeList()
  },

  methods: {
    async getExamineeList() {
      const { data: res } = await this.$http.get('examinee', {
        params: this.quaryInfo,
      })
      if (res.code !== 20000) {
        return this.$message.error('获取失败')
      }
      this.examineelist = res.data.value
      this.total = res.data.total
      console.log(res)
    },
    //监听pagesize改变的事件
    handleSizeChange(newLimit) {
      // console.log(newSize)
      this.quaryInfo.limit = newLimit
      this.getStudentList()
    },
    //监听页码值改变的时间
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.getStudentList()
    },
    //监听添加对话框的事件
    addDiaogClose() {
      this.$refs.addFormRef.resetFields()
    },
    //点击按钮添加学生
    addExaminee() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        //真正的添加用户的网络请求
        const { data: res } = await this.$http.post('examinee', this.addForm)
        if (res.code !== 20000) {
          this.$message.error('添加失败')
        }
        this.$message.success('添加用户成功')
        this.addDialogVisable = false
        //重新获取用户列表
        this.getExamineeList()
      })
    },
    //展示编辑用户的对话框
    async showEditDialog(ENo) {
      this.quaryInfo.searchText = ENo
      const { data: res } = await this.$http.get('examinee', {
        params: this.quaryInfo,
      })
      this.editForm = res.data.value[0]
      this.editdialogVisible = true
    },
    //监听修改用户对话框关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    editExamineeInfo() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return console.log(valid)
        const { data: res } = await this.$http.put('examinee', {
          EName: this.editForm.EName,
          ESex: this.editForm.ESex,
          EAge: this.editForm.EAge,
          EPolitical: this.editForm.EPolitical,
          IsCurrent: this.editForm.IsCurrent,
          EQualifications: this.editForm.EQualifications,
          ESource: this.editForm.ESource,
          ERfeMajor: this.editForm.ERfeMajor,
          ERfeCategory: this.editForm.ERfeCategory,
        })
        this.editdialogVisible = false
        this.getExamineeList()
      })
    },
    async removExamineeById(ENo) {
      const confirmResult = await this.$confirm(
        '是否删除数据?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err)

      const { data: res } = await this.$http.delete('examinee/' + ENo)
      this.$message.success('删除用户成功')
      this.getExamineeList()
    },
  },
}
</script>

<style lang="less" scoped>
</style>
